<template>
	<view class="diyfrom" :style="'padding:' + mydata.p_t / 2 + 'px ' + mydata.p_lr / 2 + 'px ' + mydata.p_b / 2 + 'px'">
		<view class="diyfrom_div" :style="'border-radius:' + this.mydata.r_t / 2 + 'px ' + this.mydata.r_t / 2 + 'px ' + this.mydata.r_b / 2 + 'px ' + this.mydata.r_b / 2 + 'px '">
			<view v-for="(item, i) in list" :key="i" class="drag-item" v-bind:class="{'active-item': item.active && !hideline}">
				<customfrom @outdata='outdata($event,i)' :mydata="item"></customfrom>
			</view>
			<view class="btn-box" v-if="list.length > 0">
				<view @click="validatfrom" class="btn" :style="'background:' + mydata.input_color">{{ mydata.input_value }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import customfrom from '@/components/customfrom/customfrom';

export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			list: [],
			
		};
	},
	mounted() {
		this.list=this.mydata.list
		
	},
	created() {
		// this.getfrom()
	},
	components: {
		customfrom
	},
	methods: {
		outdata(data,i){
			this.list[i]=data
		},
		getfrom(){
			var id=this.mydata.id
			this.$http('/form/template/'+id,{},'GET').then(res=>{
				
			})
		},
		validatfrom() {

			let list = this.list;
			var validat = true;
			var answer = [];
			for (var i = 0; i < list.length; i++) {
				var type=list[i].type;
				var params = list[i].params;
				if(params.required){
					if (!params.value) {
						if(params.tip){
							var tip=params.tip;
						}else{
							if(!params.start.value){
								var tip=params.start.tip;
							}else{
								var tip=params.start.tip;
							}
						}
						uni.showToast({
							title: tip,
							icon: 'none'
						});
						validat = false;
						return false;
					} else {	
						
						if(type=='mobile'&&!this.$u.test.mobile(params.value)){
							uni.showToast({
								title: params.tip,
								icon: 'none'
							});
							validat = false;
							return false;
						}						
						if(type=='card'&&!this.$u.test.idCard(params.value)){
							uni.showToast({
								title: params.tip,
								icon: 'none'
							});
							validat = false;
							return false;
						
							
						}
						answer.push({
							title: list[i].name,
							value: params.value,
							type:type
						});
					}
				}else{
					if(type=='mobile'&&params.value&&!this.$u.test.mobile(params.value)){
						uni.showToast({
							title: params.tip,
							icon: 'none'
						});
						validat = false;
						return false;
					}
					
					// let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
					// let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
					if(type=='card'&&params.value&&!this.$u.test.idCard(params.value)){
						uni.showToast({
							title: params.tip,
							icon: 'none'
						});
						validat = false;
						return false;
					
						
					}
					answer.push({
						title: list[i].name,
						value: params.value,
						type:type
					});
				}
				
			}
			if (validat) {
				this.answerfrom(answer);
			}
		},
		answerfrom(answer) {
			
			let data = {
				template_id: this.mydata.id,
				answer: JSON.stringify(answer)
			};
			this.$http('/form/answer', data, 'PUT').then(res => {
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.diyfrom {
	.diyfrom_div {
		background: #ffffff;
		overflow: hidden;
	}
	// background: #FFFFFF;
}
.btn-box {
	overflow: hidden;
	padding: 16px 0;
	margin: 0 12px 0 12px;
	border-top: 1px solid #e6e7eb;
	.btn {
		width: 166px;
		height: 36px;
		background: linear-gradient(172.42deg, #ff3c29 0%, #ff6f29 94.38%);
		border-radius: 32px;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: 36px;
		color: #ffffff;
		margin: 0 auto;
		text-align: center;
	}
}
</style>
